<template>
 <el-card>
     <el-row>
        <el-col :span="18">
          <el-form label-width="80px" :model="form"  size="small" :inline="true">
            <el-form-item label="学科名称">
              <el-input style="200px" v-model="form.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button @click="search" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" >
          <el-button icon="el-icon-edit" type="success" size="small" style="float:right" @click="addSubjest">新增学科</el-button>
        </el-col>
      </el-row>
       <el-alert class="alert"  type="info" :closable="false" show-icon ><span>数据一共{{total}}条</span></el-alert>
  <!-- 列表内容 -->
   <el-table
      :data="tableData"
      :total="total"
      style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="subjectName" label="学科名称" width="100"></el-table-column>
      <el-table-column prop="username" label="创建者" width="120"></el-table-column>
      <el-table-column label="创建日期" width="150">
        <template slot-scope="scope">{{scope.row.addDate.substr(0,19).replace("T","  ")}}</template>
      </el-table-column>
      <el-table-column label="前台是否显示" width="110" style="text-align:center">
        <template slot-scope="scope">
          {{format(scope.row.isFrontDisplay)}}
        </template>
      </el-table-column>
      <el-table-column prop="twoLevelDirectory" label="二级目录" width="100"></el-table-column>
      <el-table-column prop="tags" label="标签" width="60"></el-table-column>
      <el-table-column prop="totals" label="题目数量" width="90"></el-table-column>
      <el-table-column  label="操作" width="258">
         <template slot-scope="scope">
         <div style="color:#409EFF" >
           <span  style="cursor: pointer;" @click="classify(scope.row)">学科分类</span>&nbsp;
           <span  style="cursor: pointer;" @click="label(scope.row)">学科标签</span>&nbsp;
           <span  style="cursor: pointer;" @click="changeSubject(scope.row)">修改</span>&nbsp;
           <span  style="cursor: pointer;" @click="del(scope.row.id)">删除</span>&nbsp;
         </div>
          </template>
      </el-table-column>
   </el-table>
  <div class="block">
    <el-pagination
    class="page"
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="per_page"
      layout="prev, pager, next, sizes,jumper"
      :total="total">
    </el-pagination>
  </div>
  <!-- 弹框--修改学科 -->
  <el-dialog
        title="修改学科"
        :visible.sync="xDialogVisible"
        width="30%">
      <el-form :model="xRuleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学科名称" prop="subjectName">
      <el-input v-model="xRuleForm.subjectName" placeholder="请输入学科名称">
      </el-input>
    </el-form-item>
    <el-form-item label="是否显示" >
        <el-switch v-model="xRuleForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="xOff">取 消</el-button>
          <el-button type="primary" @click="xOn()">确 定</el-button>
        </span>
    </el-dialog>
   <!-- end -->
   <!-- 弹框--新增学科 -->
            <el-dialog
                 title="新增学科"
                 :visible.sync="dialogVisible"
                 width="30%">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学科名称" prop="subjectName">
                <el-input v-model="ruleForm.subjectName" placeholder="请输入学科名称">
                </el-input>
             </el-form-item>
             <el-form-item label="是否显示" >
                  <el-switch v-model="ruleForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
             </el-form-item>
               </el-form>
                 <span slot="footer" class="dialog-footer">
                   <el-button @click="off">取 消</el-button>
                   <el-button type="primary" @click="on">确 定</el-button>
                 </span>
             </el-dialog>
             <!-- end -->
  </el-card>

</template>

<script>
import { list, remove, add, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      dialogVisible: false, // 添加学科的弹框
      xDialogVisible: false, // 修改学科的弹框
      // 分页
      requestParams: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      form: {
        subjectName: ''
      },
      input: '',
      tableData: [], // 数据列表
      total: 0, // 数据总条数
      curPage: 1, // 当前要请求第几页数据
      per_page: 10, // 一页显示几条数据
      page: 1, // 当前默认显示在第几页
      value: true, // 修改中的开关(红绿)
      // 学科添加需要的参数
      ruleForm: {
        subjectName: '',
        isFrontDisplay: false
      },
      // 修改学科需要的参数
      xRuleForm: {
        subjectName: '',
        isFrontDisplay: false
      },
      // 校验规则
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      curId: null
    }
  },
  methods: {
    // 清除
    clear () {
      console.log('clear')
      this.form.subjectName = ''
      this.hGetList()
    },
    // 搜索
    search () {
      console.log('filter')
      this.hGetList()
    },
    // 弹框--添加学科
    addSubjest () {
      this.dialogVisible = true
    },
    //    添加弹框--取消
    off () {
      this.dialogVisible = false
      this.$message({
        type: 'warning',
        message: '已取消添加'
      })
    },
    //    添加弹框--确认
    on () {
      const data = {
        id: this.curId,
        subjectName: this.ruleForm.subjectName,
        isFrontDisplay: this.ruleForm.isFrontDisplay
      }
      add(data).then(res => {
        console.log(res)
        this.hGetList()
        this.dialogVisible = false

        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.ruleForm.subjectName = ''
      })
    },
    // 弹框--修改学科
    changeSubject (data) {
      this.curId = data.id
      this.xDialogVisible = true
      detail(data).then(res => {
        this.xRuleForm.subjectName = res.data.subjectName
        this.xRuleForm.isFrontDisplay = res.data.isFrontDisplay
        console.log(res)
      })
    },
    //   修改弹框--取消
    xOff () {
      this.xDialogVisible = false
      this.$message({
        type: 'warning',
        message: '已取消修改'
      })
    },
    //   修改弹框--确认
    xOn () {
      const data = {
        id: this.curId,
        subjectName: this.xRuleForm.subjectName,
        isFrontDisplay: this.xRuleForm.isFrontDisplay
      }
      update(data).then(res => {
        console.log(res)
        // this.xRuleForm.subjectName = res.config.data.subjectName
        // this.xRuleForm.isFrontDisplay = res.config.data.isFrontDisplay
        this.xDialogVisible = false// 关闭弹框
        this.hGetList()
        this.$message({ // 修改成功提示信息
          message: '修改成功',
          type: 'success'
        })
      })
    },
    // 跳转--学科分类
    classify (row) {
      this.$router.push({
        path: './directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 跳转--学科标签
    label (row) {
      this.$router.push({
        path: './tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 列表删除
    del (id) {
      console.log(id)
      const params = {
        id: id
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(params).then(res => {
          this.hGetList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 数字换成汉字
    format (isshow) {
      const isshowObj = {
        1: '是',
        0: '否'
      }
      return isshowObj[isshow]
    },
    // 分页
    handleSizeChange (val) {
      // 每页页显示几条
      this.per_page = val
      this.hGetList()
    },
    handleCurrentChange (pageNum) {
      // 显示哪一页
      console.log(pageNum)
      this.page = pageNum
      this.hGetList()// 渲染页面
    },
    // 获取列表
    hGetList () {
      const data = {
        page: this.page, // 第几页
        pagesize: this.per_page, // 判断一页有几条数据
        subjectName: this.form.subjectName// 搜索el_input的内容
      }
      list(data).then(res => {
        console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
      })
    }

  },
  // 渲染页面
  mounted () {
    this.hGetList()
  }
}
</script>

<style scoped lang='scss'>
.alert{
margin-bottom: 15px;
}
.page{
 margin:15px 0;
}
.block{
  float: right;
}
.el-inp{
  width:500px
}
</style>
